<template>
  <div class="app-container">
    <!-- 搜索项 -->
    <div class="search_bar">
      <el-form size="small" :inline="true" label-width="83px">
        <el-form-item label="课程名称">
          <el-input
            class="inputstyle"
            v-model="sea_form.courseName"
            placeholder="请输入课程名称"
            clearable
            @keyup.enter.native="getdataBysearch"
          />
        </el-form-item>
        <el-form-item label="分院名称">
          <el-select
            v-model="sea_form.branchId"
            placeholder="请选择"
            clearable
            class="inputstyle"
          >
            <el-option
              v-for="(item, index) in branchList"
              :key="index"
              :label="item.branchName"
              :value="item.branchId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学科专业组">
          <el-input
            class="inputstyle"
            v-model="sea_form.disciplineGroupName"
            placeholder="请输入学科专业组"
            clearable
            @keyup.enter.native="getdataBysearch"
          />
        </el-form-item>
        <el-form-item label="主讲教师">
          <el-select
            class="inputstyle"
            placeholder="请选择"
            v-model="sea_form.teacherId"
            filterable
          >
            <el-option
              v-for="(item, index) in commonTeacher"
              :key="index"
              :label="item.name"
              :value="item.teacherId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学期">
          <el-select
            class="inputstyle"
            placeholder="请选择学期"
            v-model="sea_form.semesterId"
            filterable
          >
            <el-option
              v-for="item in schoolSemesterList"
              :key="item.semesterId"
              :label="item.semesterName"
              :value="item.semesterId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="search_btns">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getdataBysearch"
          >搜索
          </el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
          >重置
          </el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!--  导出按钮-->
    <div class="exportbtn">
      <el-button type="primary" size="mini" @click="exportExcel()"
      >导出Excel
      </el-button
      >
    </div>
    <!-- 问卷列表 -->
    <el-table v-loading="loading" :data="dataList">
      <el-table-column
        show-overflow-tooltip
        label="课程名称"
        align="center"
        prop="courseName"
        width="200"
      />
      <el-table-column
        show-overflow-tooltip
        label="分院"
        align="center"
        prop="branchName"
        width="160"
      />
      <el-table-column
        show-overflow-tooltip
        label="学科专业组"
        align="center"
        prop="disciplineGroupName"
        width="120"
      >
        <template slot-scope="scope">
          {{
            scope.row.disciplineGroupName ? scope.row.disciplineGroupName : '--'
          }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="主讲教师"
        align="center"
        prop="principalName"
        width="160"
      />
      <el-table-column
        show-overflow-tooltip
        label="授课班级"
        align="center"
        prop="className"
        width="160"
      />
      <el-table-column label="班级学生数" align="center" prop="studentNum"/>
      <el-table-column label="在学人数" align="center" prop="studyingCount"/>
      <el-table-column
        label="未开始人数"
        align="center"
        prop="unstartedCount"
      />
      <el-table-column label="已完成人数" align="center" prop="finishedCount"/>
      <el-table-column
        label="学生平均进度"
        align="center"
        prop="learningProgress"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.learningProgress }}%</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="sea_form.pageNum"
      :limit.sync="sea_form.pageSize"
      @pagination="getList"
    />
    <exportItem ref="exportitem" @confirmExport="confirmexport"></exportItem>
  </div>
</template>
<script>
import { getSchoolSemesterList } from '@/api/schoolSemester/schoolSemester'

import {
  listPost_branch
} from '@/api/schoolOrganization/organization'
import { allTeacherList } from '@/api/course/course'
import exportItem from './commponent/studyexportItem'
import { getlearningProgress } from '@/api/dataExport/dataexport'
import { formatDate } from '@/utils'

export default {
  components: { exportItem },
  name: 'studyschedule',
  data() {
    return {
      commonTeacher: [],
      branchList: [],
      loading: false,
      // 总条数
      total: 3,
      // 搜索条件
      sea_form: {
        pageNum: 1,
        pageSize: 50,
        branchId: '',
        courseName: '',
        teacherId: '',
        semesterId: '',
        disciplineGroupName: ''
      },
      dataList: [],
      schoolSemesterList: []
    }
  },
  mounted() {
    this.getTeacher()
    this.getBranchList()
    this.getList()
    this.getSchoolSemester()
  },
  methods: {
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
        this.sea_form.semesterId = this.$store.getters.schoolInfo.semesterId
      }
    },
    // 搜索
    getdataBysearch() {
      this.sea_form.pageNum = 1
      // 发送获取信息请求
      this.getList()
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pagrSize: 10,
        branchId: '',
        courseName: '',
        teacherId: '',
        semesterId: this.$store.getters.schoolInfo.semesterId,
        disciplineGroupName: ''
      }
      this.getdataBysearch()
    },
    // 获取问卷数据
    async getList() {
      this.loading = true
      let res = await getlearningProgress(this.sea_form)
      this.loading = false
      const { code, rows, total } = res
      if (code == 200) {
        this.total = total
        this.dataList = rows
      }
      console.log(this.dataList, 'skdkdsssssssssskdd')
      // 发送获取数据请求
    },
    // 获取分院
    getBranchList() {
      listPost_branch({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.rows, 'skdkdkdd')
          this.branchList = res.rows
        }
      })
    },
    /* 获取主讲教师 */
    async getTeacher() {
      let res = await allTeacherList({
        schoolId: this.$store.getters.schoolId,
        pageNum: 1,
        pageSize: 9999
      })
      console.log(res.rows, 'ssssssss')
      this.commonTeacher = res.rows
    },
    exportExcel() {
      this.$refs.exportitem.show()
    },
    // 导出
    async confirmexport(str) {
      let obj = this.sea_form
      obj.params = str
      this.download(
        `/school/system/exportData/learningProgressExport`,
        obj,
        `学习进度情况表_${formatDate(new Date())}.xlsx`
      )
    }
  }
}
</script>
<style scoped lang="scss">
.search_bar {
  padding: 20px 20px 0 20px;
  background-color: #fafafa;

  .search_btns {
    float: right;
  }
}

.exportbtn {
  display: flex;
  justify-content: flex-end;

  margin: 10px 0;
}

.inputstyle {
  width: 240px !important;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  -webkit-appearance: none;
  background-color: #fff;
  /* 滚动条背景颜色 */
  height: 8px;
  /* 滚动条高度 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #bfbfbf;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #fff;
}
</style>
